<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>努比亚首页</title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<!--顶部区域-->
		<div class="top">
			<div class="top_in">
				<div class="top_left">
					<!--logo图片一般都包裹一下强调-->
					<h1><a href="#" title="努比亚"></a></h1>					
				</div>
				<div class="top_right">
			
						<ul class="top_nav">
							<li><a href="#">首页</a></li>
							<li><a href="#">商城</a></li>
							<li><a href="#">产品</a></li>
							<li><a href="#">应用</a></li>
							<li><a href="#">服务</a></li>
							<li><a href="#">体验店</a></li>
							<li><a href="#">社区</a></li>
						</ul>
					
					<ul class="top_login">
						<li><a href="#">登录</a></li>
						<li><a href="#">注册</a></li>
						<li></li>
					</ul>
				</div>
			</div>
		</div>
		<!--广告区域-->
		<div class="banner">
			<!--设置背景色的width=100%-->
			<div class="nav_out">
		
			<div class="nav">
				<ul>
					<li>
						<a href="javascript:void(0);">
							<img src="img/nav-phone1.png" alt="新款" />
							<p>Z11 miniS<span style="color: blue;">新款</span></p>
						</a>
						
					</li>
					<li><a href="#">
						<img src="img/nav-phone2.png" />
						<p>Z11<span style="color: red;">降价</span></p>
					   </a></li>
					<li><a href="#">
						<img src="img/nav-phone3.png" />
						<p>Z11 Max</p>
					  </a></li>
					<li><a href="#">
						<img src="img/nav-phone4.png" />
						<p>Z11 mini</p>
					  </a></li>
					  <li><a href="#">
						<img src="img/nav-phone5.png" />
						<p>N1</p>
					  </a></li>
					  <li><a href="#">
						<img src="img/nav-phone6.png" />
						<p>布拉格S</p>
					  </a></li>
					  <li><a href="#">
						<img src="img/nav-phone7.png" />
						<p>My布拉格</p>
					  </a></li>
				</ul>
			</div>
			</div>
			<!--轮播图-->
			<div class="figure">
				<img src="img/banner.jpg" />
				<!--轮播序号-->
				<ol>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ol>
			</div>
			<!--视频区域-->
			<div class="video">
				<ul>
					<li><img src="img/video1.jpg">
					<!--图片的悬浮物-->
					<div class="video_info">
						<img src="img/nb-pro-video-ico-s.png" alt="" />
						<h3>Z11 黑金版</h3>
						<p>产品视频</p>
						
					</div>
					</li>
					<li><img src="img/video2.jpg">
							<div class="video_info">
						<img src="img/nb-pro-video-ico-s.png" alt="" />
						
							<h3>微距相机</h3>
						
					</div>
					</li>
					<li><img src="img/video3.jpg">
					<div class="video_info">
						<img src="img/nb-pro-video-ico-s.png" alt="" />
						<h3>努比亚Z11</h3>
						<p>突破边界</p>
						
					</div>
					</li>
				</ul>
			</div>
		</div>
		<!--内容区域-->
		<div class="content">
			<dl>
				<dt>
					<h3>最新产品</h3>
					<p>查看全部手机> </p>
				</dt>
				<dd>
					<ul class="count_phone">
						<li>
							<img src="img/con-phone1.jpg">
							<!--图片文字描述-->
							<div class="phong_dis">
								<h4>Z11S</h4>
								<p>极光蓝</p>
								<span>一探究竟</span>
							</div>
						</li>
						<li>
							<img src="img/con-phone2.jpg" class="phone_scale">
							<div class="phong_dis">
								<h4>Z11S</h4>
								<p>炫酷黑</p>
								<span>一探究竟</span>
							</div>
						</li>
						<li>
							<img src="img/con-phone3.jpg">
							<div class="phong_dis">
								<h4>Z11S</h4>
								<p>流金黄</p>
								<span>一探究竟</span>
							</div>
						</li>
						<li>
							<img src="img/con-phone4.jpg" class="phone_scale">
							<div class="phong_dis">
								<h4>N1</h4>
								<p>白配黑</p>
								
							</div>
						</li>
						<li>
							<img src="img/con-phone5.jpg" class="phone_scale">
							<div class="phong_dis">
								<h4>Z11 mini</h4>
								<p>炫酷黑</p>
								
							</div>
						</li>
					</ul>
				</dd>
				<dt>
					
					<h3>精选配件</h3>
					<p>查看全部配件> </p>
				</dt>
				<dd>
						<ul class="content_accessories">
						<li>
							<img src="img/accessories1.jpg" />
							<p>努比亚快充移动电源</p>
						</li>
						<li>
							<img src="img/accessories2.jpg" />
							<p>努比亚无损耳机</p>
						</li>
						<li>
							<img src="img/accessories3.jpg" />
							<p>努比亚玩具</p>
						</li>
						<li>
							<img src="img/accessories4.jpg" />
							<p>努比亚自拍杆</p>
						</li>
					</ul>
				</dd>
			</dl>
			
			
					
		</div>
		<!--底部区域-->
		<div class="footer">
				 <div class="footer_in">
					<div class="footer_top">
						 <img src="img/nb-pro-ft-logo-x2.jpg" width="14px" height="13px">
		            &gt;
		            <span>全部机型</span>
					</div>
					<div class="footer_center">
						<dl>
			                <dt>Z系列</dt>
			                <dd><a href="#">nubia Z11</a></dd>
			                <dd><a href="#">nubia Z11 Max</a></dd>
			                <dd><a href="#">nubia Z11 mini</a></dd>
			            </dl>
			            <dl>
			                <dt>M系列</dt>
			                <dd><a href="#">nubia 布拉格S</a></dd>
			                <dd><a href="#">nubia My 布拉格</a></dd>
			            </dl>
			            <dl>
			                <dt>配件</dt>
			                <dd><a href="#">保护壳</a></dd>
			                <dd><a href="#">皮套</a></dd>
			                <dd><a href="#">贴膜</a></dd>
			                <dd><a href="#">耳机</a></dd>
			                <dd><a href="#">数据线/充电器</a></dd>
			                <dd><a href="#">周边产品</a></dd>
			            </dl>
					</div>
					<div class="footer_bottom">
						 <ul class="footer_copyright">
			                <li><a href="#">关于我们</a>|</li>
			                <li><a href="#">联系我们</a>|</li>
			                <li><a href="#">新闻中心</a>|</li>
			                <li><a href="#">加入我们</a>|</li>
			                <li><a href="#">合作注册</a>|</li>
			                <li><a href="#">公益</a>|</li>
			                <li><a href="#">以旧换新</a>|</li>
			                <li><a href="#">问题反馈</a>|</li>
			                <li><a href="#">简体中文</a></li>
			            </ul>
			            <!--精灵图-->
			            <ul class="footer_social">
			                <li><a href="#"></a></li>
			                <li><a href="#"></a></li>
			                <li><a href="#"></a></li>
			                <li><a href="#"></a></li>
			                服务热线：400-700-6600
			            </ul>
			            <p class="footer_info">
			                2012-2017 努比亚技术有限公司 版权所有
			                <a href="#">粤ICP备10006213号-2</a>
			                <img src="img/gs.jpg" width="10px">
			                深圳市市场监督管理局企业主体身份公示 ICP经营许可证编号：粤B2-20120688
			                <img src="img/gh.png" width="10px">
			                <a href="#">粤公网安备 44030502000309号</a>
			            </p>
					</div>
				</div>
		</div>
	</body>
</html>
